@import '~modern-normalize/modern-normalize.css';
@import './variables.css';
@import './fonts.css';

html {
  height: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  height: 100%;
  margin: 0;
  padding: 0;
}

body.scroll-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

a {
  color: var(--link-color);
  font-weight: bold;
  cursor: pointer;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"]{
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 18px;
  box-shadow: inset 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
  border: none;
  border-radius: var(--border-radius);
  color: var(--input-color);
  background-color: var(--input-bg-color);
}

::placeholder {
  color: var(--input-placeholder-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  box-shadow: inset 0px 0px 5px 3px var(--input-outline-color);
  outline: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

select {
  font-size: var(--font-size-s);
  width: auto;
  padding: var(--space-s);
  padding-right: var(--space-xl);
  appearance: none;
  color: var(--input-color);
  border: none;
  border-radius: var(--border-radius);
  background-color: hsl(var(--hue-blue), 10%, 66%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 24 24'><path fill='currentColor' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 1.5rem;
  outline: none;
  cursor: pointer;

  &:focus-visible {
    outline: var(--focus-outline);
  }
}

@supports (backdrop-filter: saturate(250%) blur(20px)) or (-webkit-backdrop-filter: saturate(250%) blur(20px)) {
  .bg-blur {
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(250%) blur(20px);
    backdrop-filter: saturate(250%) blur(20px);
  }
}

mark {
  color: inherit;
  background-color: var(--mark-bg-color);
}
